<template>
  <div>
    <p>线性ICON</p>
    <div class="icon-wapper">
      <div
        class="icon-area"
        v-for="(item,index) in linearIcons"
        :key="index">
        <e-icon
          :size="50"
          :type="item">
        </e-icon>
        <span>{{item}}</span>
      </div>
    </div>
    <p>面性ICON</p>
    <div class="icon-wapper">
      <div
        class="icon-area"
        v-for="(item,index) in PlanarityIcons"
        :key="index">
        <e-icon
          :size="50"
          :type="item">
        </e-icon>
        <span>{{item}}</span>
      </div>
    </div>
    <icon-md class="markdown-body"></icon-md>
  </div>
</template>

<script>
import iconMd from '../../docs/icon.md';
export default {
  name:'iconExamples',
  components: {
    iconMd
  },
  data() {
    return {
      linearIcons: [
        // "down",
        // "warning-2",
        // "spin-21",
        // "default",
        // "screen",
        // "minus",
        // "no-data",
        // "apps",
        // "clock",
        // "copy",
        // "bell",
        // "closed-eye",
        // "delete",
        // "edit-square",
        // "enclosure",
        // "cart",
        // "a-eye2x",
        // "enlarge",
        // "expand",
        // "file-excel",
        // "date",
        // "file-pdf",
        // "file-image",
        // "file-gif",
        // "file-ppt",
        // "file-text",
        // "file-unknown",
        // "file-word",
        // "file-zip",
        // "file",
        // "folder-open",
        // "folder",
        // "info-circle",
        // "frozen",
        // "narrow",
        // "function",
        // "member",
        // "pause-circle",
        // "play-circle",
        // "question",
        // "setting",
        // "refresh",
        // "sq-download",
        // "search",
        // "sq-upload",
        // "photo-failed",
        // "relation",
        // "share",
        // "upload-to-cloud",
        // "warning-circle",
        // "arrow-up",
        // "arrow-down",
        // "arrow-left",
        // "arrow",
        // "cross",
        // "plus",
        // "success",
        // "back-top",
        // "close",
        // "download",
        // "ellipsis",
        // "edit",
        // "exchange",
        // "fold",
        // "link",
        // "passed",
        // "replay",
        // "recovery",
        // "restart",
        // "unfold",
        // "upload",
        // "checked",
        // "warning",
        // "clear",
        // "info",
        "add",
        "remove",
        "share1",
        "PPT1",
        "image1",
        "a-Unknownfile1",
        "pdf1",
        "drag1",
        "GIF2",
        "label",
        "notification",
        "association",
        "backtop",
        "attach",
        "add-rectangle",
        "check",
        "check-circle",
        "chevron-down-rectangle-filled",
        "chevron-right-rectangle",
        "chevron-down",
        "chevron-left-rectangle-filled",
        "chevron-down-rectangle",
        "chevron-up-rectangle-filled",
        "chevron-left",
        "display",
        "chevron-left-rectangle",
        "chevron-up-rectangle",
        "chevron-right-rectangle-filled",
        "folder",
        "copy",
        "edit-1",
        "download",
        "delete",
        "close-circle",
        "close",
        "excel",
        "edit",
        "chevron-right",
        "warning",
        "file",
        "expand",
        "info-circle",
        "hide",
        "more-rectangle",
        "fullsreen",
        "help-circle",
        "a-Imagedefault",
        "date",
        "link",
        "move",
        "a-Imagedamage",
        "refresh",
        "folder-open",
        "time",
        "password",
        "zoom-in",
        "zip",
        "Overview",
        "search",
        "Restart",
        "more",
        "skip",
        "a-Upload2",
        "start",
        "upload",
        "a-ShoppingCart",
        "pause",
        "retract",
        "a-setup",
        "restore",
        "switch",
        "usergroup",
        "zoom-out",
        "chevron-up",
        "text",
        "a-nodata",
        "sort-down",
        "sort-up",
        "filter",
        "word"],
      PlanarityIcons: [
        "caret-up1",
        "caret-right1",
        "caret-left1",
        "caret-down1",
        "check-circle-filled",
        "close-circle-filled",
        "warning-filled",
        "freeze",
        "more-filled",
        "location",
        "info-circle-filled",
        "help-circle-filled",
        "run",
        "time-filled",
      ]
        
    }
  }
}
</script>
<style scoped lang="less">
 p {
    width: 1024px;
    margin:0 auto;
    padding-bottom: 5px;
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #6F7D96;
    line-height: 18px;
    border-bottom: 1px solid #E5E5E5;
  }
.icon-wapper{
  width: 1024px;
  margin:0 auto;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  // justify-content: space-evenly;
  justify-content: left;
  .icon-area{
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin: 30px;
    span{
      width: 100px;
      text-align: center;
    }
  }
}
.markdown-body {
  width: 1024px;
  margin:0 auto;
}
</style>
